import Container from "../../../../container";
import { FileItemType } from "../..";
import styles from "./index.module.less";
import { CloseOutlined } from "@ant-design/icons";
import { useMemo } from "react";

interface IProps {
  item: FileItemType;
}

function FileItem(props: IProps) {
  const {
    item: { label, key, onClick, closable },
  } = props;

  const { currentFileName, handleFileDelete } = Container.useContainer();

  const isActive = useMemo(() => {
    return currentFileName === key;
  }, [currentFileName, key]);

  return (
    <div
      className={`${styles.item} ${isActive ? styles.active : ""}`}
      onClick={onClick}
    >
      {label}
      <div
        onClick={(e) => {
          e.stopPropagation();
          handleFileDelete(key);
        }}
        style={{
          display: closable ? "block" : "none",
        }}
      >
        <CloseOutlined />
      </div>
    </div>
  );
}

export default FileItem;
